<template>
  <div class="app-container">
    <el-row>
      <!-- 功能按钮 -->
      <el-col :span="3">
        <div style="margin-bottom: 10px;margin-top: 50px">
          <el-button plain type="primary" size="medium" @click="addChapter()">
            <svg-icon icon-class="add-file"/>
            添加章节
          </el-button>
        </div>
        <div>
          <el-button plain type="success" size="medium" @click="handleCheckedTreeExpand">
            <div v-if="expandAll">
              <svg-icon icon-class="folder-open"/>
              全部折叠
            </div>
            <div v-else>
              <svg-icon icon-class="folder"/>
              全部展开
            </div>
          </el-button>
        </div>
      </el-col>
      <!-- 章节列表 -->
      <el-col :span="18">
        <div class="courseTitle">{{ courseTitle }}</div>
        <el-table
          :data="chapterList"
          :show-header="false"
          :default-expand-all="expandAll"
          fit
          row-key="id"
          ref="chapterTree"
        >
          <el-table-column prop="title" min-width="48%">
            <template slot-scope="scope">
              <svg-icon v-if="scope.row.name==='cha'" icon-class="pen-fill"></svg-icon>
              <svg-icon v-else icon-class="pen"></svg-icon>
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="10%" align="center">
            <template slot-scope="scope">
              <!-- 判断为可免费观看视频 -->
              <el-tag v-if="scope.row.free" type="primary" size="medium" effect="dark">可免费试看</el-tag>
            </template>
          </el-table-column>
          <el-table-column min-width="12%" align="right">
            <template slot-scope="scope">
              <!-- 判断为章节节点 -->
              <div v-if="scope.row.name==='cha'">
                <el-button type="text" style="color:#42B983" @click="addVideo(scope.row.id)">添加课时</el-button>
              </div>
              <!-- 判断为视频节点 -->
              <div v-else>
                <!-- 判断是否有视频 -->
                <el-tag v-if="scope.row.videoSourceId!==null && scope.row.videoSourceId!==''"
                        type="success"
                >
                  已上传视频
                  <a :href="USER_API + '/player/' + scope.row.videoSourceId" target="_blank">
                    <i class="el-icon-video-play" style="margin-left: 5px;"/>
                  </a>
                </el-tag>
                <el-tag v-else type="warning">未上传视频</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="5%" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="color:#118AB2"
                         @click="edit(scope.row)"
              >编辑
              </el-button>
            </template>
          </el-table-column>
          <el-table-column min-width="5%" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="color:#EF476F"
                         @click="removeById(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col></el-col>
    </el-row>
    <!-- 章节表单对话框 -->
    <chapter-form ref="chapterForm"/>
    <!-- 课时表单对话框 -->
    <video-form ref="videoForm"/>
    <div style="text-align:center;margin-top: 30px">
      <el-button type="primary" size="medium" @click="prev()" icon="el-icon-arrow-left">上一步</el-button>
      <el-button type="primary" size="medium" @click="next()">
        下一步<i class="el-icon-arrow-right el-icon--right"/>
      </el-button>
    </div>
  </div>
</template>

<script>
import { courseApi, chapterApi, videoApi } from '@/api'
import ChapterForm from '@/views/course/components/Chapter/Form'
import VideoForm from '@/views/course/components/Video/Form'

export default {
  components: { ChapterForm, VideoForm },
  data() {
    return {
      chapterList: [], // 章节嵌套列表
      expandAll: true, // 是否全部展开
      courseTitle: '', // 课程标题
      USER_API: process.env.VUE_APP_WEB_API
    }
  },
  created() {
    this.fetchTreeList()
    courseApi.queryInfoById(this.$parent.courseId).then(response => {
      this.courseTitle = response.data.item.title
    })
  },
  methods: {
    // 获取树形列表
    fetchTreeList() {
      chapterApi.getTreeList(this.$parent.courseId).then(response => {
        this.chapterList = response.data.items
      })
    },
    // 编辑
    edit(row) {
      if (row.name === 'cha') {
        // 编辑章节
        this.$refs.chapterForm.open(row.id)
      } else {
        // 编辑课时
        this.$refs.videoForm.open(row.chapterId, row.id)
      }
    },
    // 删除
    removeById(row) {
      this.$confirm('将会删除这条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.name === 'cha') {
          // 删除章节
          chapterApi.deleteById(row.id).then(() => {
            this.fetchTreeList()
            this.$message.success('删除章节成功')
          })
        } else {
          // 删除视频
          videoApi.deleteById(row.id).then(() => {
            this.fetchTreeList()
            this.$message.success('删除视频成功')
          })
        }
      }).catch(error => {
        // 当取消时会进入catch语句error = 'cancel'
        // 当后端服务抛出异常时error = 'error'
        if (error === 'cancel') {
          this.$message.info('取消删除')
        }
      })
    },
    // 打开添加章节对话框
    addChapter() {
      this.$refs.chapterForm.open()
    },
    // 添加课时
    addVideo(chapterId) {
      this.$refs.videoForm.open(chapterId)
    },
    // 上一步
    prev() {
      this.$parent.active = 0
    },
    // 下一步
    next() {
      this.$parent.active = 2
    },
    // 处理展开与折叠
    handleCheckedTreeExpand() {
      this.expandAll = !this.expandAll
      this.$nextTick(() => {
        this.chapterList.forEach(i => {
          this.$refs.chapterTree.toggleRowExpansion(i, this.expandAll)
        })
      })
    }
  }
}
</script>

<style>
.courseTitle {
  color: #073B4C;
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
